<template>
  <div class="docker">
    <div v-for="item in dockerList" :key="item.icon" class="docker__item"
      :class="item.active ? 'docker__item--active' : ''" @click="goTab(item)">
      <div class="iconfont" v-html="item.icon"></div>
      <div class="docker__title">{{ item.title }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from 'vue-router'
const dockerList = ref([
  { icon: '&#xe60a;', title: '首页', active: true, name: 'Home' },
  { icon: '&#xe6af;', title: '购物车', name: 'Cart' },
  { icon: '&#xe6b2;', title: '订单', name: 'Home' },
  { icon: '&#xe62a;', title: '我的', name: 'Home' }
])
const router = useRouter()
const goTab = (name) => {
  router.push({ name: 'Cart' })
};
</script>

<style lang="scss" scoped>
@import '../../css/variables.scss';
@import '../../css/mixins.scss';

.docker {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  padding: 0 0.08rem 0 0.08rem;
  border-top: 0.01rem solid $content-bgColor;
  color: $content-fontColor;

  &__item {
    flex: 1;
    text-align: center;

    .iconfont {
      font-size: 0.18rem;
      margin: 0.07rem 0 0.02rem 0;
    }

    &--active {
      color: #1FA4FC;
    }
  }

  &__title {
    font-size: .2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>
